Don't Stress: REACTJS | Start!

#designisorion #react #javascript #beginners

Don't Stress: ReactJS (Day 01)

Hi Readers,

For a while now I wanted to start learning ReactJS, but was in fear. Not any more and for the year of 2020, I decided to take a step forward into React making major upgrades in the skillset. Yes there are frameworks that are compared to React such as Vue and Angualar, but my interest kept leaning towards this library. I am writing these collection of post for ones whom are starting React, but don't know where to start. If you are like me, you've probably visited the Reactjs.org site millions of times never really understanding. Hope this helps your Reactjs journey.

Hope you enjoy!!!

*What is ReactJS?

Open source library for building user interfaces
Not a framework
Focus on building amazing UI
Rich ecosystem

*Why learn ReactJS?

Created and maintained by Facebook
More than 100K Stars on Github
Huge Community
High Demand skillset

*Component Based Architecture

A website can be broken down into: Header, SideNav, Main Content and Footer.

*Reusable Code

Components are allowed to be reused.

*React is declarative

Tell React what you want and React will build the actual UI
React makes it painless to make the complex UI
React will handle efficiently updating and rendering of the components
DOM updates are handles gracefully in React.

*More on why React?

Seamlessly integrate react into any of your applications.
Portion of your page or complete page or even an entire application itself.
React native for mobile applications.

Prerequisites

HTML, CSS and JS fundamentals
ES6
JavaScript - 'this' keyword, filter, map and reduce
ES6 - let & const, arrow functions, template literals, default parameters, object literals, rest and spread operators and destructing assignment. ( The review should take an hour or so max and you won't need any additional studies if this is known to learn React)

Let's begin Simple ReactJS Hello World! App

Create a folder to hold the React project(s). My folder is called "ReactJs".
Within the VSCode Terminal type the following: npx create-react-app "app name" -This may take a moment due to packages being installed.
Then type: cd-my-app
Then type: npm run build
Once you so, the default browser will display a webpage showing the React logo. The page is locally hosted at : http://localhost:3000/
To edit you will have to navigate to the .src/App.js file. To do so, you will go into code editor folder menu.
Within the src/App.js file, change the wording in between the paragraph tags to "Hello World!".
Navigate back to the browser showing the localhost React site. Refresh. Congrats "Hello World!" should appear.

You've created your first Reactjs App!