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 Array.map
  • 🚧 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

defaultProps

  • 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 https://github.com/facebook/create-react-app tool that helps you to run React code with minimal configuration.

Great place to look for courses of higher quality. https://egghead.io/

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 https://nodeschool.io/bratislava/

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.