REACT JS TUTORIAL #3 – Composing Multiple React.js Components



This video covers how to compose a complete React.js application component structure by building multiple components that all work together to build our application.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

-~-~~-~~~-~~-~-
Also watch: “Responsive Design Tutorial – Tips for making web sites look great on any device”

-~-~~-~~~-~~-~-

Related Posts
lit-HTML (Chrome Dev Summit 2017)

lit-HTML is a next-generation templating library that combines powerful web platform primitives – JavaScript tagged template literals and HTML templates Read more

The Truth about app development – how coding has changed in 2020.

Ex-Google TechLead explains why apps and websites are so hard to succeed. Check out http://curiositystream.com/techlead for unlimited access to the Read more

How to use Cordova to create an Android app

This example is for JavaScript beginners. We take a simple JavaScript web app that estimates paint cost and create an Read more

Display notifications – Progressive Web App Training

What's the best way to display popup notifications on mobile and desktop. This video shows how to use the Notification Read more

44 thoughts on “REACT JS TUTORIAL #3 – Composing Multiple React.js Components”

  1. You mention a standard rule of thumb is to have component names with a capital letter in the beginning, for instance Car.js. This is also an important rule of thumb in OOP (Object Oriented Programming) when creating classes.

    Reply
  2. Love you Man i love the way you present this Course #React.js I Want full access of all the topics is this full Course of REACT.JS

    Reply
  3. 2:21 The most brilliant statement I've heard in a long time: "The reason we capitalize component names as a standard is because they are a constructor." This guy is good, really good!

    Reply
  4. Hi, I came across your video and have found them enormously informative. I do have a quick question, why do you use export DEFAULT class after you start making multiple components. I was following along on my computer using my own IDE and when I did not include the word DEFAULt it would crash my react app. Thank again for the video!

    Reply
  5. I've been working in the web dev world for about 7 years now, and absolutely LOVE jquery. About a week ago, i watched this series, and really couldn't wrap my head around how this was better than jquery. Now a week later, having played with react, I can say i'm starting to really grasp react, and it's thanks to this video series. You helped me to understand the concepts, and also helped me to re-think how I do things during development. Huge thanks for making these videos.

    Reply
  6. Nice videos dude! I really like them, the sad part is, i just lost myself in the first video, so my desire to code along was destroyed 🙁

    Reply
  7. why header an title in body tag? what is the different between this title in index.html and title being rendered from the title.js file?

    Reply
  8. hey could you please tell me while importing other file do we need to use one dot(import from './components/index.js' or do we need to do two dot(import from '../component/index.js')

    Reply
  9. Hola, hice el un ejemplo de React: Header,Body,Footer en español, clonalo aqui: https://github.com/gustavms/react-template-espanol . Saludos Amigos!

    Reply
  10. 0:09 Creating your first component
    0:33 Capitalize your component names
    2:48 Rendering multiple versions of something
    4:13 Organizing your files / hierarchy

    Reply
  11. Hey guys! I found this course is helpful to me and I'm making a written version of this tutorial based on this course: https://annot.io/github.com/learncodeacademy/react-js-tutorials, cause I needed to write down what I've studied somewhere.

    I hope someone finds it helpful 🙂

    Reply
  12. Question: why we see the footer tag/component in dom inspection as "footer" but the title showing the actual template (e.g no "title" tag)?

    Reply
  13. Small mistake at 6:00 but the component you first pointed to and said was your header component is really your Layout component. It's a div wrapping Header and Footer components. The first child is your Header component which is a div wrapping the h1 tag.

    In case anyone gets confused.

    Reply
  14. Hi Will, What is the best practice to use when importing modules ES2015 imports or webpack require ? also doesn't it hurt if a module import is repeated like you do when importing "React" in Layout and in Header ? doesn't this grow up the bundled file ?

    Reply
  15. ReactDOM.render(<Layout />, document.getElementById('app')) would also work, you don't have to create a variable and assign it document.getELementById and THEN load that into your render function. If you think about it there really aren't any reason why you would?

    Reply
  16. Hey man, thanks A TON for your work! I do have a question. I noticed that your style is different from the one Facebook suggests i.e. they use React.createClass( { } ) and render: function( ) { }. What is your opinion on this?

    Reply
  17. Around the 4:00 mark you state that you like keep your requires alphabetised…why? Is it just so that they are easier to track down if you have a tonne of them in a bigger project?

    Reply
  18. Let me see if I got this right. So you saved the "layout" component before you deleted it and created the "header component"? Thats how you were able to use it even though you turned it into the header component?

    Reply
  19. I like your theme and whatever plugins you have going in your side bar for Sublime. What do you have going over there? The little icons for JS, CSS, etc? What color scheme is that?

    Reply
  20. Thank you for breaking these videos up into short sections like you have. This has been way easier to utilize than a longer video.

    Thank you

    Reply
  21. Hey, I'm kinda new to OOP with Javascript and something confuses me: I've seen some tutorials using React.createClass for creating their components instead of creating classes with the "class" keyword. Is their a significant difference between those two methods?

    Reply
  22. Hey dude, thanks for these videos – helping a lot to learn React. Question – can you please supply your sublime theme / packages you've got installed? I love the workflow you have and shortcuts – similar way to how I like to code.

    Reply
  23. I assume you didn't intend to remove the header element inside the Header component. Because if you did, you may as well just use <Title /> instead of <Header />.

    Reply
  24. Great video as always. Unfortunately the sound setup you have picks up all of your breathing and mouth "smacks" for lack of a better explanation.(especially if using headphones) I'm not sure what would fix this but maybe a pop filter or adjust the gain on your mic?

    Reply

Leave a Comment