Javascript course — Using React

Javascript course — Using React

Part #8: It is like HTML but better.

Photo by rawpixel on Unsplash
React you know

function (data) { return UI; }

It is simple you provide a data and function that transform the data into UI.

  • 💚 no DOM manipulation
  • 💪 the full power of Javascript

Simple component

  • named with first character uppercase
  • takes one argument in React often called prop
  • returns component
function Hello({ name = "" }) {   return <h1>👋 Hello {name}</h1>; }

Simple use of previously declared component

  • reusing component is the key benefit of using components
  • you can provide prop or props to a child component
function App() {   return <Hello name="Nodeschool" />; }
Things are getting pretty serious

Render List

  • transform a list of items to list of components
  • use
  • 🚧 a list should use keys at least use an index as key if the values are not unique or you can combine index and the not unique value in a combined key


  • prefer defaultProps over providing default values for paramenter
  • App.defaultProps.items will be accessible but the function is hidden

Bonus a full-featured web

  • using mdx-js
  • build in markdown support with ReactJs
  • build in routing using the file structure
  • every file in pages folder will have its own route

Thanks for your attention 🎉🎉🎉

Please follow me and maybe clap on some of the articles and write what you have learned in comments.

Useful links

Link to create react app tool that helps you to run React code with minimal configuration.

Great place to look for courses of higher quality.

Read and look at the videos and articles of Kent C. Dodds. He is a great man.

There are interactive courses not related to React on the website

Link to a recent advanced course

Decoupling Software Design Patterns commonly used with React

Javascript course — Using React was originally published in ableneo Technology on Medium, where people are continuing the conversation by highlighting and responding to this story.