Learn reactjs, how to code with example and general understanding thinkwik
0 likes55 views
The document provides a beginner's guide on how to code with ReactJS, covering fundamental concepts like JSX, single-way data flow, and the virtual DOM. It outlines the process of setting up a new React project using 'create-react-app', including folder structure and component organization. The article emphasizes the use of best practices for building larger applications and introduces concepts such as higher-order components and functional components, with plans to explore React Router and Axios in future installments.
Learn reactjs, how to code with example and general understanding thinkwik
- 1. Thinkwik.com 1 Understanding how to code ReactJS | Basic Setup and General Understanding Written by Jalaj Sharma A whole lot of talk about reactJS, redux, better alternative to Angular and more, but what is all that? Have you found a lot of learning material and went through the documentation but are still confused about how to code? Here in this article we will break down all the big terms with reactJS like redux, axios, react router, JSX and more with explanation and how to code with that. For this part of the article, we will focus more on the general setup, understanding how to start, create a basic skeleton with code alongside understanding. For reading this, I believe you have basic understanding of reactJS as this course mainly focuses on how to code reactJS, best practices, redux etc with their understanding. Blog Thinkwik
- 2. Thinkwik.com 2 What is ReactJS? 1 ReactJS is a javascript library created by the Facebook community to create a user interface and mainly focuses on building single page application. Some of the core features of reactJS are: JSX: Javascript and XML (JSX) is a simple javascript that lets creation of DOM elements more precisely without making use of HTML. It allows us to use HTML syntax and even old-fashioned javascript for flexibility. Single Way data flow: In component’s renderer, immutable values are passed as properties. Components are restricted to modify the properties directly by themselves but they can listen to the callback function. Virtual DOM: Virtual DOM is a copy of the real DOM. Virtual DOM manages nodes of DOM elements and checks for changes in any element. If it finds a change in any of the element, it modifies that specific element in the real DOM instead of re-rendering the complete DOM tree. Let’s get our hands dirty and understand things better by writing some code and creating a simple react project. To create a new project, we will use create-react-app, which provides us a complete boilerplate with a configuration of babel and webpack setup and more. Make sure you have npm or any other package manager like yarn installed on your machine as we will be using this for managing our packages. 1 http://blog.thinkwik.com/understanding-how-to-code-reactjs-basic-setup-and-general-understanding/ Blog Thinkwik
- 3. Thinkwik.com 3 Your my-shopping-app project will now be running in the browser on port 3000. Open the created project in any code editor, I will be using atom for this. Blog Thinkwik
- 4. Thinkwik.com 4 The above image shows the basic folder structure provided by create-react-app. Now since this is our project, let's modify it and add stuff according to our needs. For this part of our article, we will focus on designing a general workflow with folder structure we might be needing, creating basic components, designing a page and making use of higher order components. You can clone and download source code for this project and play around with it. Blog Thinkwik
- 6. Thinkwik.com 6 Let’s understand the folder structure here. I have renamed app.js and app.css to MyShoppingApp.js and MyShoppingApp.css as per our project’s name. the component folder will be comprised of all the independent components which generally does not rely upon any other component. Container folder acts as a container of any other component as their child component. For now, we don’t have any need of the container folder, but following the good coding pattern and futuristic approach, we have kept Product component inside the container folder. There are 2 higher order components – Layout and Aux. Layout.js is generally acting as a higher order component to wrap a different section of the project within one page. It takes the header and the main content area and wrap them all together to globally use repeated components without adding them every time. Aux is a higher order component that simply returns the component which is wrapped within it. It has been created to avoid any unnecessary use of <div> tag to wrap complete elements within a component. Blog Thinkwik
- 7. Thinkwik.com 7 Layout.js Aux.js For this project, I am using bootstrap v4.0.0 for the design part. Layout component here is wrapping Header component and Products component. There is a different file created for the header to use it everywhere across the project without repeating the same code over time. Blog Thinkwik
- 9. Thinkwik.com 9 The Header component above uses Aux component as a wrapper that returns the complete component without making use of any unnecessary <div> element. It has 2 links, Product, the page we are currently on and `About`, which we will build along the go when we are dealing with react router. Products.js Blog Thinkwik
- 10. Thinkwik.com 10 Products component comprises of all our listed products with details and allows us to add products to our cart. We won’t be implementing any payment gateway for this course module but we will make use of this component at the time of bringing redux into action. Blog Thinkwik
- 11. Thinkwik.com 11 Here is how our website looks so far. May not be super beautiful, what things we need to understand to start with. Blog Thinkwik
- 12. Thinkwik.com 12 Side Notes ● Since our test project is a very small project, most of the functionalities implemented here may not be very useful for this project but are quite useful when working on the large-scale application. What we do here will give you an idea of how to implement best practices in large-scale applications. ● Making use of functional components is a very good practice. Though we have not touched anything such so far, we will be implementing it in `About` module where we will not be needing any lifecycle hook or any need to updating state. In the second part of this series, we will look on how to work with react router, react router dom, how to fetch data using axios and will be doing some modification in what we have created so far. Follow along with the series and do comment your thoughts or any question that you may have. So get ready, as we are about to move forward to dive deeper into react’s core features. For more details and New, Tech Updates click here Blog Thinkwik