I am new to application development with React-native. While creating project with the command react-native init appname
the index.js
file is also created inside the project folder. Today, I have learned that there is a better way than installing android emulator to test react-native projects which is Expo. To create expo projects I need to create react-native project with create-react-native-app appname
command. However, the index.js
file is not created while creating project with this way. Even though, I manually created the index.js
file, it does not work as it should.
One more question: What is aim of App.js
and index.js
?
index. js is the starting point for React Native applications, and it is always required. It can be a small file that require s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
js is where you would usually mount/render your main react component onto your “root” element(which you mark in your html). “App” is what people tend to call the file which contains the main logic of your file, or in React case, the main component, the one that represents your entire application/web-site.
“App. js” is the starting point of your Application that you are bootstrapping in “index. js.” As you can see, it is just a regular React component. The only difference is that you are using predefined components from “react-native.” We will start by creating a folder to hold our components.
In simple words: index. html is where all your UI is rendered by React and index. js is where all your JS codes exist.
React Native: (react-native init
)
A little bit of history. In earlier versions of React Native, separate index.js
files were required for iOS and Android. App.js
was meant to contain the top level cross platform code for your app. Then index.ios.js
and index.android.js
would import the cross platform code from App.js
and register/link it with the underlying native modules. That allowed you to place top-level cross platform code in one file while placing top-level platform specific code in other files. The index.*.js
files were the connectors that wired up the Javascript to native Android or iOS code.
As React Native evolved to remove the platform specific index files, they kept the paradigm of having the top-level Javascript in App.js
and using index.js
to wire that code to the native modules.
Bottom Line
As a practical matter, don't touch index.js
. Make your top-level modifications in App.js
.
Expo: (create-react-native-app
)
Expo operates a little differently than baseline React Native. You will notice that an Expo project does not contain the ios
or android
directories. That is because there is no native code associated with an Expo project. All of the native code is contained in the Expo SDK. Since there is no native code to wire up to your Javascript, you do not need an index.js
file.
Bottom Line
You should not need an index.js
file in an Expo project. If your Expo project is not working, there is likely another problem that needs to be resolved.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With