Getting Started with Expo React Native and Styled Components using a Netflix Clone example

  • For me it opens it up in Sublime Text Editor, but since I prefer to use WebStorm, I just manually find where the project was created and open the project using WebStorm.Your initial project structure should look something like this:Lets create the basic outline of this project, I like to structure my project by putting everything in a ‘src’ folder and then splitting it up from there.Create a ‘src’ folder and create a ‘components’ directory with a ‘common’, ‘navigation’, and ‘screens’ subdirectories.
  • I also use this file to store any other common styling attributes such as font sizes, and padding/margin lengths.You will also need to grab some images and put them in your /assets directory or you can use the ones that I picked out in here: grab the Netflix logo icon and put it under assets/icons directory: project directory structure should look something like this:I like to make my imports look clean, so I would recommend that you install the babel plugin `babel-plugin-module-alias`.
  • babelrc file, (located in your root project directory) you will need to add the module-resolver field and since we’re having all our files in the /src directory, you need to set the root to src .
  • babelrc file should look like this:Now lets install react-navigation and styled-components by going into the terminal and navigating to the root project directory, and type in `npm install react-navigation — save“npm install Constants and Dummy DataIn our constants/styles.
  • js like so:In your we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so:Now lets go back to our App.js file, and create a DrawerNavigator with the HomeStackNavigator as it’s initial route in the drawerRouterConfigNow hopefully if everything works, you should be able to load up the iOS simulator and you should see something like this:All the code is has been a really great tool to bootstrap my react native projects and I highly recommend it to anyone that wants to quickly get started with React Native.

In your /src/components/navigation/home-stack-navigator.js , we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so: Now lets go back to our App.js file, and create…
Continue reading “Getting Started with Expo React Native and Styled Components using a Netflix Clone example”

Using react-devtools with React Native – Exposition

Using react-devtools with #ReactJS Native:  by @notbrent #JavaScript

  • Using react-devtools with React NativeMany moons ago, Jared Forsyth was an intern at Facebook and he worked on re-writing react-devtools and integrating them with React Native.
  • After he left, the React Native integration fell into disrepair and became unusable.As of React Native 0.43 / React 16 alpha (Expo SDK 16), it is once again working (in simulator/emulator), thanks (I believe) to the efforts of Dan Abramov.
  • To set it up, follow these steps, which I have paraphrased below:npm install –save-dev react-devtools in your app directory.Add “devtools”: “react-devtools” under scripts in package.json.npm run devtoolsNow when you run your app it will connect and display the component tree.
  • Read more about what you can do with this in the react-devtools README.Obligatory demo GIF

Many moons ago, Jared Forsyth was an intern at Facebook and he worked on re-writing react-devtools and integrating them with React Native. After he left, the React Native integration fell into…
Continue reading “Using react-devtools with React Native – Exposition”

React.JS — Component Data Transfer – codeburst

  • If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through state.So what is state?The heart of every React component is its “state”, an object that determines how that component renders behaves.
  • That might look something like this:class component_A extends Component { constructor() { super(); this.state = { data: [], };}In this case, we are defining the state of data.
  • Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components.
  • [callback] in the child, and pass in the data as an argument.From our above example, our code might look something like this:class component_A extends Component { constructor() { super(); this.state = { listDataFromComponent_C: “ “, };}myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponent_C});Now from within the child component (component_C) we can pass something to props are static, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component.
  • It might look like the following:class component_A extends Component {constructor = {dataFromComponent_C: “ “};},myCallback = (dataFromComponent_C) = {this.setState({ dataFromComponent_C: dataFromComponentC });This is just a brief explanation of how to change data within a component, and transfer data to other child and parent components.

In React JS, there’s often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done…
Continue reading “React.JS — Component Data Transfer – codeburst”

Looking for QA Volunteers for Introduction to React Native

  • The QA process is a time for people to spot any glaring mistakes, spelling errors, broken links, mistakes in teachers notes, clarification on quiz questioning, and any other feedback.
  • With QA there’s a few other things you should know.
  • Those are the quirks of QA mode.
  • Please use email to provide feedback.
  • When in QA, we try to not talk about the course here on the Community forum until it’s officially released.

Participate in discussions with other Treehouse members and learn.
Continue reading “Looking for QA Volunteers for Introduction to React Native”

Why React is winning and how you can win with it? – Shival Gupta

  • Angular is still the reigning champion of front end frameworks, but React is the most loved.
  • Angular maybe in King’s Landing for now, but React is king in the north.
  • And React has a steep learning curve.
  • With React Native spearheading the war on the mobile apps front (and performing awesomely), it is worth it to investigate React in your freetime and make the decision yourself.
  • I’ll write more on learning and working with React if this post crosses 5 comments.

React.js is the king in the north.  Angular is still the reigning champion of front end frameworks, but React is the most loved. And there are particular reasons to it. I made the jump from using Angular 1.x to Angular 2 earlier this year and then to React. The experience and developer productivity that I…
Continue reading “Why React is winning and how you can win with it? – Shival Gupta”

It’s Real! – codingirl – Medium

It’s Real!  #react #reactnative #reactjs #reactjs

  • Thanks to Stephen Grider’s Udemy courses “The Complete React native and Redux Course”, I am finally getting the hang of the idea’s and syntax behind React.8/4: I used CRNA (Create React Native) via Expo XDE.
  • My code editor of choice is Atom, with a Nuclide packager, and a linter called ESLint, which gives me a little nudge when I make careless syntax mistakes.Today I spent my time editing the App.js file, which is the main JS file holding the “meat” of the app.
  • Expo does that for me :)I also edited a header.js file.
  • I created an ‘src’ folder, which will hold all of the JS files I will be creating and editing.
  • The src folder also holds a ‘components’ folder, which has JS files holding the code for certain components.ComponentsOnly 1 component per file!Component nesting: Pretty self explanatory… 1 component inside anotherProps (Properties)Make components reusable throughout the appData it holds is easily flexibleFlexboxWay to position elementsjustifyContent = Up/down positioning→ flex-end = bottom→ flex-start = topalignItems = Left/right positioning→ flex-start = left→ center = center→ flex-end = rightMisc.Self closing JSX syntax = Name /NPM module = import name easily (all paths are unique)Self-made module = write path of moduleApp = root (parent) // Header = child component under the parentBelow is the file structure:

The birth of “THE APP” (Official name TBD) . After over five failed attempts, either through setup because of mistakes either from downloading libraries or misplacing directories… it is finally here…
Continue reading “It’s Real! – codingirl – Medium”

Getting Started with Expo React Native and Styled Components using a Netflix Clone example

  • For me it opens it up in Sublime Text Editor, but since I prefer to use WebStorm, I just manually find where the project was created and open the project using WebStorm.Your initial project structure should look something like this:Lets create the basic outline of this project, I like to structure my project by putting everything in a ‘src’ folder and then splitting it up from there.Create a ‘src’ folder and create a ‘components’ directory with a ‘common’, ‘navigation’, and ‘screens’ subdirectories.
  • I also use this file to store any other common styling attributes such as font sizes, and padding/margin lengths.You will also need to grab some images and put them in your /assets directory or you can use the ones that I picked out in here: grab the Netflix logo icon and put it under assets/icons directory: project directory structure should look something like this:I like to make my imports look clean, so I would recommend that you install the babel plugin `babel-plugin-module-alias`.
  • babelrc file, (located in your root project directory) you will need to add the module-resolver field and since we’re having all our files in the /src directory, you need to set the root to src .
  • babelrc file should look like this:Now lets install react-navigation and styled-components by going into the terminal and navigating to the root project directory, and type in `npm install react-navigation — save“npm install Constants and Dummy DataIn our constants/styles.
  • js like so:In your we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so:Now lets go back to our App.js file, and create a DrawerNavigator with the HomeStackNavigator as it’s initial route in the drawerRouterConfigNow hopefully if everything works, you should be able to load up the iOS simulator and you should see something like this:All the code is has been a really great tool to bootstrap my react native projects and I highly recommend it to anyone that wants to quickly get started with React Native.

In your /src/components/navigation/home-stack-navigator.js , we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so: Now lets go back to our App.js file, and create…
Continue reading “Getting Started with Expo React Native and Styled Components using a Netflix Clone example”