5 practical tips to finally learn React in 2018

  • I’ve learned React (as many other things) the hard way: I got my feet wet, experimented a lot, read a lot, sometimes spent weeks without much progress while other times I could have had a dozen a-ha moments in a single evening.
  • Bear in mind that this advice relates to learning React fundamentals.
  • Instead, these are just some helpful guidelines to help you learn React fundamentals faster — so you can move on to the other things.
  • It’s not perfect — one page at a time with no way to switch — but it lets you get started fast.
  • Storing the current page name in a local variable is not ideal as we can’t change it… so we can store it in the state instead: – – And since might want to go to , we can pass each page a function to switch to another page: – -…

Your job needs you to learn React yesterday… You’ve never even read about it until 3 days ago. Sounds ike you? Here are some tips to learn faster.
Continue reading “5 practical tips to finally learn React in 2018”

Ivan Linko’s answer to How good is ReactJS for building e-commerce websites?

  • A common E-commerce website usually comprises a plethora of forms to fill, complex filters, elements, which interact with different APIs, maps, etc.
  • With the help of React you can easily implement all of those features, making it a good option to build highly interactive E-commerce websites.
  • One of the great things about React is that it allows for a rather convenient way of storing and manipulating the state of your app (e.g. filtering through items is a change in the state of the app).
  • What’s more, React comes with a whole bunch of ready-made modules for all occasion, not mentioning that it’s easy to test and scale.
  • We’ve used React in some of our E-commerce projects and it recommended itself as a very mature and versatile technology.

A common E-commerce website usually comprises a plethora of forms to fill, complex filters, elements, which interact with different APIs, maps, etc. With the help of React you can easily implement all of those features, making it a good option to build highly interactive E-commerce websites. One of the great things about React is that it allows for a rather convenient way of storing and manipulating the state of your app (e.g. filtering through items is a change in the state of the app). What’s more, React comes with a whole bunch of ready-made modules for all occasion, not mentioning that it’s easy to test and scale.
Continue reading “Ivan Linko’s answer to How good is ReactJS for building e-commerce websites?”

Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium

Why ReactJs?  #react #reactjs

  • Instead of writing an html line for news, messenger and marketplace you can see that they are basically the same, the only thing that changes is the icon and the information so we can make a component called nav that receives information and an icon.
  • Let code this component:First, we are going to make its container, with an JSON object with the information we want to be see.Now we are going to do the component:Using this practice, we are able to create a web app by just iterating a JSON object, that will pass the information to the containers.Another cool thing of react is its community.
  • There is a lot of components already made so you can just add them to your project as easily as adding a library to your normal html code.
  • Some github repositories that have a lot of components are:· lot of people have a problem with HTML being mixed with JS because they feel like breaking separation of concerns but in reality, it is more of a separation of technologies rather than concerns.
  • It helps your application to be more efficient because you don’t need to repeat code, there is an amazing community behind it, it has some really awesome modules that helps you to manage the unidirectional data flow, as well as managing which component must be render and if it is a component that is visible in all of the pages such as a menu to just render it once instead of every time you change of page.Tldr: react is awesome.

React is a new JavaScript library developed by Facebook released in 2013, but it wasn’t until 2017 that react was stable. React is like the best of both worlds, it has the functionality of JavaScript…
Continue reading “Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium”

Using Props in React – ziv zamechek – Medium

Using Props in React  #javascript #react #reactjs

  • In between the time it takes the first render of the component to fetching this data and setting it on our state that takes some time and during that time the length of videos is equal to 0 that is the reason that we see 0 for half a second when refreshing the page.
  • this.state = { videos: [] };When it is first rendered it does search of surfboards and it gets the response from this.stateApp is the parent of video list and video list need to get access to the videos that are in the app state.
  • passing data from the parent component App to the child component VideoList we are passing the list of videos just by defining a property on the JSX tag.Here we are passing video list to render method.
  • Anytime when App re render VideoList will get the videos as well.So now we have a functional VideoList component and it has array of videos to render.
  • Our video list component will receive props that contain an array of videos so we just loop over this array and for each video will generate one instance of video list for each item.Now each VideoListItem which is intended to show a single video now it will show a single li with a video.A map is a built in method that is a property of an array.

When we use functional component the props object will arrive as an argument to the function. const videos = props.videos; this is the array of videos. {props.videos.length} so this is saying that…
Continue reading “Using Props in React – ziv zamechek – Medium”

Intro to React.js – Agata Krzywda – Medium

  • Intro to React.jsFor the past few months I have been learning react.js by doing a lot of online courses, tutorials, going to workshops and most recently attended to awesome react flipflops course run by Maciej Nowakowski.I learnt a lot on the way and now I am putting together this tutorial with the aim of it being the one tutorial I wish I had when I first got started.This is a introduction tutorial of my series of ’’intro to React.js’’.
  • Editing text on the pageOpen App.js this is your main react component.
  • Create new componentCreate new file in src folder call MyComponent.jsThis is a simple component which says ‘Hello World!’
  • To use that component in App.js we need to import it at the top of the file.import MyComponent from ‘.
  • Using state and methodsIn class components for example App.js we can use state to store informations about our component.State is an object and can give it initial values in constructor, e.gthis.state = { isOn: true };You can access to state in render method using this.state for example if we want use isOn property we get it from this.state.isOnThe button text is determined by the current value isOn property.button{ this.state.isOn ?

For the past few months I have been learning react.js by doing a lot of online courses, tutorials, going to workshops and most recently attended to awesome react flipflops course run by Maciej…
Continue reading “Intro to React.js – Agata Krzywda – Medium”

react-d3-HOC-axis

Does it still count as a HOC even if you're wrapping a function in a Component? #reactjs

  • You can also link to another Pen and we’ll pull the CSS from that Pen and include it.
  • You can also add another Pen and it will pull the CSS from it.
  • You can also link to another Pen and we’ll pull the JavaScript from that Pen and include it.
  • You can apply CSS to your Pen from any stylesheet on the web.
  • HTML preprocessors can make writing HTML more powerful or convenient.


Continue reading “react-d3-HOC-axis”

Nishant Agrwal’s response to Why isn’t React called framework? What does it lack to be a framework?

Why isn't React called framework? ⚛  #ReactJS #JavaScript @reactjs

  • It is a framework in the sense that it absolutely does have a predefined architecture and infrastructural design and it calls into your code to fill in the details.
  • It is the framework code that runs first and that calls into your code to determine what has to be done at a high level.
  • The difference between a library and a framework has to do with Inversion of Control .
  • The code written by the user of a framework just defines in an abstract way the specifics of that particular application.
  • At the end of the day it is more important to understand how React is different from the classic examples of either a library or a framework.

Why isn’t React called framework? What does it lack to be a framework?
Continue reading “Nishant Agrwal’s response to Why isn’t React called framework? What does it lack to be a framework?”