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!
Top comments (2)
Nice
Thanks tons!